<template>
  <div class="box">
    <div class="container-xl">
      <section class="section-nav-banner">
        <div class="banner-top">
          <ul class="banner-option">
            <div class="option-left">
              <li
                v-for="item in Firstlevelcourses"
                :key="item.id"
                @mouseenter="Movein(item.id)"
                @mouseout="Remove"
              >
                {{ item.categoryName }}
              </li>
            </div>
            <div class="option-right" v-if="determine">
              <div class="detail-desc">基础知识</div>
              <div class="detail-list">
                <div class="list-know">知识点：</div>
                <ul>
                  <li>
                    <a href="/course?tags=Node.js" title="Node.js">Node.js</a>
                  </li>
                </ul>
              </div>
              <ul class="section-nav-banner-Ul">
                <li v-for="item in Secondary" :key="item.id">
                  <div style="width: 140px; height: 100%">
                    <img
                      :src="item.courseCover"
                      alt=""
                      style="width: 100%; height: 100%"
                    />
                  </div>
                  <div style="width: 258px; height: 100%">
                    <div class="Ul-di">{{ item.courseName }}</div>
                    <div class="Ul-di">
                      中级.<span>{{ item.purchaseCounter }}</span
                      >人报名
                    </div>
                    <div class="Ul-di">价格：{{ item.salePrice }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </ul>
          <div
            class="swiper-container swiper-container-fade swiper-container-initialized swiper-container-horizontal"
          >
            <el-carousel indicator-position="outside" height="380px">
              <el-carousel-item v-for="item in Carousel" :key="item.id">
                <h3 text="2xl" justify="center">
                  <img
                    :src="item.name"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="row-bottom-type">
          <div class="bottom-type">
            <div class="type-left">
              <img src="./img/chuji.png" alt="" />
            </div>
            <div class="type-right">
              <div class="right-title">初级课程</div>
              <div class="right-desc">入门课、岗位多</div>
            </div>
          </div>

          <div class="bottom-type">
            <div class="type-left">
              <img src="./img/zhongji.png" alt="" />
            </div>
            <div class="type-right">
              <div class="right-title">中级课程</div>
              <div class="right-desc">进阶与实战</div>
            </div>
          </div>

          <div class="bottom-type">
            <div class="type-left">
              <img src="./img/gaoji.png" alt="" />
            </div>
            <div class="type-right">
              <div class="right-title">高级课程</div>
              <div class="right-desc">轻松掌握核心技能</div>
            </div>
          </div>

          <div class="bottom-type">
            <div class="type-left">
              <img src="./img/xiangmu.png" alt="" />
            </div>
            <div class="type-right">
              <div class="right-title">项目与实战</div>
              <div class="right-desc">手把手实践</div>
            </div>
          </div>

          <div class="bottom-type">
            <div class="type-left">
              <img src="./img/suanfa.png" alt="" />
            </div>
            <div class="type-right">
              <div class="right-title">前端算法</div>
              <div class="right-desc">笑傲前端技能</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { onBeforeMount, ref } from "vue";
export default {
  name: "HelloBot",
  setup() {
    // 一级类的数组
    let Firstlevelcourses = ref([]);
    // 二级类的数组
    let Secondary = ref([]);
    // 轮播图的数组
    let Carousel = ref([
      {
        id: 1,
        name: "https://oss.xuexiluxian.cn/xiaoluxian-vcr/a6bf85e2ce6c470ea9f8c6c703175c8c.png",
      },
      {
        id: 2,
        name: "https://oss.xuexiluxian.cn/xiaoluxian-vcr/8c6ee4cf7fb54425987871b9a2f52f2e.png",
      },
      {
        id: 3,
        name: "https://oss.xuexiluxian.cn/xiaoluxian-vcr/818bb516173241708b1389bd03cd68a7.jpg",
      },
      {
        id: 4,
        name: "https://oss.xuexiluxian.cn/xiaoluxian-vcr/1985d6893e044996bf54b0a2ee904981.jpg",
      },
    ]);

    // 定义一个判断事件
    let determine = ref(false);

    // 加载前生命周期钩子
    onBeforeMount(() => {
      axios
        .get(
          "http://testapi.xuexiluxian.cn/api/course/category/getFirstCategorys"
        )
        .then((res) => {
          Firstlevelcourses.value = res.data.data.list;
        });
    });

    // 鼠标移入事件
    var Movein = (id) => {
      determine.value = true;
      axios
        .post(`http://testapi.xuexiluxian.cn/api/course/search`, {
          pageNum: 1,
          pageSize: 10,
          entity: {
            firstCategory: id,
            secondCategory: "",
            tags: "",
            isMember: "",
            isFree: "",
            courseLevel: "",
            sortBy: "",
          },
        })
        .then((res) => {
          Secondary.value = res.data.data.pageInfo.list;
        });
    };

    // 鼠标移出事件
    var Remove = () => {
      determine.value = false;
    };
    return {
      Firstlevelcourses,
      Carousel,
      determine,
      Movein,
      Remove,
      Secondary,
    };
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  /* background: pink; */
  display: flex;
  margin-top: 20px;
}
.container-xl {
  padding: 0 0;
  margin: auto;
}
.section-nav-banner {
  width: 100%;
  padding: 0 0 30px 0;
  margin-bottom: 30px;
}
.banner-top {
  display: flex;
  height: 400px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  position: relative;
}
.banner-option {
  position: relative;
  padding: 10px 0;
  width: 280px;
  height: 100%;
  background-color: #2b283d;
}

.option-left > li {
  color: aliceblue;
  padding: 0 10px;
  height: 49px;
  line-height: 49px;
}

ul > li {
  list-style: none;
}

.option-left > li:hover {
  background-color: aqua;
}

.option-left {
  width: 100%;
  height: 100%;
}

.option-right {
  position: absolute;
  left: 280px;
  top: 0;
  z-index: 999;
  min-width: 750px;
  height: 400px;
  border-radius: 0 8px 0 0;
  line-height: 20px;
  overflow: hidden;
  color: #000;
  background-color: #fff;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-container {
  width: 860px;
  height: 400px;
}

.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 400px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.detail-desc {
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  opacity: 1;
}

.detail-list {
  padding: 0 15px;
  width: 100%;
  display: flex;
  color: #333333;
  font-weight: 400;
  font-size: 14px;
}

.list-know {
  color: #333;
  letter-spacing: 2px;
}

.detail-list ul {
  display: flex;
}

.section-nav-banner-Ul {
  width: 860px;
  height: 320px;
  background: rgba(248, 248, 255, 0.936);
  display: flex;
  justify-content: center;
  align-content: normal;
  flex-wrap: wrap;
}

.section-nav-banner-Ul > li {
  width: 399px;
  height: 140px;
  background: rgb(255, 255, 255);
  float: left;
  margin: 13px 10px 10px 10px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}
.Ul-di {
  width: 100%;
  height: 46.6px;
  display: flex;
  align-items: center;
}
.row-bottom-type {
  height: 100px;
  background: pink;
  border-radius: 0px 0px 10px 10px;
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid rgb(142, 142, 212);
}
.bottom-type {
  width: 228px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  border: solid 1px rgba(240, 248, 255, 0.916);
  align-items: center;
}
.bottom-type {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom-type .type-left {
  width: 50px;
  height: 50px;
}

.bottom-type .type-left img {
  width: 100%;
  height: 100%;
}

.type-right {
  margin-left: 10px;
}

.right-title {
  font-size: 18px;
  font-weight: bold;
}

.right-desc {
  font-size: 14px;
  color: #999;
}
</style>